<template>
  <view class="daybook">
    <view class="d-header">
        <view class="h-top">
            <view class="t-left">10:34</view>
            <view class="t-right">
                <image class="t-right-icon" src="../../../static/daybook_icon/signal.png" />
                <image class="t-right-icon" src="../../../static/daybook_icon/wifi.png" />
                <image class="t-right-icon" src="../../../static/daybook_icon/dianliang.png" />
            </view>
        </view>
        <view class="h-bottom">
            <u-icon label="返回" label-color="#59adf1" label-size="17" margin-left="0" size="18" name="arrow-left" color="#59adf1"></u-icon>
            <view class="b-text1">收入纳税明细查询</view>
            <view class="b-text2">批量申诉</view>
        </view>
    </view>
    <view class="d-cell">
        <view class="cell-item">
            <view class="i-row">
                收入合计
                <image class="r-icon" src="../../../static/daybook_icon/wenhao.png" />
                :
            </view>
            <view>100000.00元</view>
        </view>
        <view class="cell-item">
            <view>已申报税额合计：</view>
            <view>717.8元</view>
        </view>
    </view>
    <view class="d-list">
        <view class="d-card">
        <view class="c-title">
            <view>工资薪金</view>
            <view style="margin-right: 90rpx;">2023-10</view>
        </view>
        <view class="c-row">
            所得项目小类：正常工资薪金
        </view>
        <view class="c-row">
            <view class="r-text">扣缴义务人：云海物联信息技术（广东）有限公司</view>
            <u-icon color="#a9a9a9" size="20" name="arrow-right"></u-icon>
        </view>
        <view class="c-row">
            收入：10000.00元
        </view>
        <view class="c-row">
            已申报税额：71.78元
        </view>
    </view>
    <view class="d-card">
        <view class="c-title">
            <view>工资薪金</view>
            <view style="margin-right: 90rpx;">2023-09</view>
        </view>
        <view class="c-row">
            所得项目小类：正常工资薪金
        </view>
        <view class="c-row">
            <view class="r-text">扣缴义务人：云海物联信息技术（广东）有限公司</view>
            <u-icon color="#a9a9a9" size="17" name="arrow-right"></u-icon>
        </view>
        <view class="c-row">
            收入：10000.00元
        </view>
        <view class="c-row">
            已申报税额：71.78元
        </view>
    </view>
    <view class="d-card">
        <view class="c-title">
            <view>工资薪金</view>
            <view style="margin-right: 90rpx;">2023-08</view>
        </view>
        <view class="c-row">
            所得项目小类：正常工资薪金
        </view>
        <view class="c-row">
            <view class="r-text">扣缴义务人：云海物联信息技术（广东）有限公司</view>
            <u-icon color="#a9a9a9" size="20" name="arrow-right"></u-icon>
        </view>
        <view class="c-row">
            收入：10000.00元
        </view>
        <view class="c-row">
            已申报税额：71.78元
        </view>
    </view>
    <view class="d-card">
        <view class="c-title">
            <view>工资薪金</view>
            <view style="margin-right: 90rpx;">2023-07</view>
        </view>
        <view class="c-row">
            所得项目小类：正常工资薪金
        </view>
        <view class="c-row">
            <view class="r-text">扣缴义务人：云海物联信息技术（广东）有限公司</view>
            <u-icon color="#a9a9a9" size="20" name="arrow-right"></u-icon>
        </view>
        <view class="c-row">
            收入：111085.82元
        </view>
        <view class="c-row">
            已申报税额：750.45元
        </view>
    </view>
    <view class="d-card">
        <view class="c-title">
            <view>工资薪金</view>
            <view style="margin-right: 90rpx;">2023-06</view>
        </view>
        <view class="c-row">
            所得项目小类：正常工资薪金
        </view>
        <view class="c-row">
            <view class="r-text">扣缴义务人：云海物联信息技术（广东）有限公司</view>
            <u-icon color="#a9a9a9" size="20" name="arrow-right"></u-icon>
        </view>
        <view class="c-row">
            收入：10000.00元
        </view>
        <view class="c-row">
            已申报税额：71.78元
        </view>
    </view>
    </view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.daybook {
    display: flex;
    flex-direction: column;
    background: #f6f7fb;
    .d-header {
        // position: fixed;
        // top: 0;
        // left: 0;
        width: 100%;
        padding: 30rpx 20rpx;
        background: #fff;
        .h-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10rpx 50rpx;
            .t-left {
                font-size: 32rpx;
                font-weight: bold;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                color: #2c2c2c;
            }
            .t-right {
                display: flex;
                .t-right-icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
            }
        }
        .h-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 60rpx;
            .b-text1 {
                // font-weight: 550;
            }
            .b-text2 {
                margin-right: 30rpx;
                font-size: 30rpx;
                color:#59adf1;
            }
        }
    }
    .d-cell {
        margin-top:30rpx;
        padding: 20rpx 30rpx;
        background: #fff;
        .cell-item {
            display: flex;
            justify-content: space-between;
            padding: 20rpx 0;
            &:nth-child(1) {
                border-bottom: 2rpx solid #eaeaea;
            }
            .i-row {
                display: flex;
                align-items: center;
                .r-icon {
                    width: 30rpx;
                    height: 30rpx;
                    margin: 0 10rpx;
                }   
            }
            
        }
    }
    .d-list {
        // flex: 1;
        overflow-y: auto;
        .d-card {
        margin-top: 30rpx;
        padding:30rpx;
        background: #fff;
        .c-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10rpx;
        }
        .c-row {
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #a9a9a9;
            .r-text {
               width: 500rpx;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
            }
        }
    }
    }
    
}
</style>